<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <el-card class="cardClass">
            <div style="text-align: center;">
                <span style="padding:10px 72px 0 0">
                    <el-button type="info" size="medium" @click="goBack" round>返回列表</el-button>
                </span>
            </div>
            <el-row type="flex" class="tip">新建模版</el-row>
            <div class="divClass">
                <el-form inline ref="formRef" :model="formData" label-width="80px" size="small" style="text-align: left" :rules="rules">
                    <el-row type="flex">
                        <el-col :md="12" :lg="12">
                            <el-form-item label="模版名称" prop="templateId">
                                <ft-quota-category  v-model="formData.templateId" 
                                                    :editing="!formDisabled" 
                                                    :categoryProp="categoryLarge"
                                                    @change="categoryLargeChange">
                                </ft-quota-category>
                            </el-form-item>
                        </el-col>
                        <el-col :md="12" :lg="12">
                            <el-form-item label="创建时间" prop="creationTs">
                                <el-date-picker v-model="formData.creationTs"
                                                type="date"
                                                disabled>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                        <el-row v-for="(item, index) in formData.gradeScope" :key="index">
                            <div v-if="index===formData.gradeScope.length-1">
                                <el-row>
                                    <el-col :md="16" :lg="12">
                                        <el-form-item :label='getLabel(item.rating_grade)'>
                                            <el-input v-model="item.max_score" @keyup.native="proving(item, 'max_score')">
                                                <template slot="append">(以下)</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-else>
                                <el-row>
                                    <el-col :sm="24" :md="12" :lg="6">
                                        <el-form-item :label='getLabel(item.rating_grade)'>
                                            <el-input v-model="item.min_score" class="inputClass-min" @keyup.native="proving(item, 'min_score')">
                                                <template slot="append">(含)</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :sm="24" :md="12" :lg="6">
                                        <el-form-item label="~" class="labelClass-max">
                                            <el-input v-model="item.max_score" class="inputClass-max" @keyup.native="proving(item, 'max_score')"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    <el-row style="padding: 16px 36px 16px 0px">
                        <el-col align="right">
                            <el-button size="mini" @click="onCancel" :disabled="cancelDisabled">取消</el-button>
                            <el-button type="primary" size="mini" @click="onSave" :disabled="saveDisabled">保存</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import FtDatePicker from "../../ft/FtDatePicker.vue";
import FtQuotaCategory from "../../ft/FtQuotaCategory.vue";
export default {
    components: {FtDatePicker, FtQuotaCategory},
    props: {
        propsData: {
            type: Object,
            default: null
        },
        isFormDisabled: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            //表单数据
            formData: {},
            //表单数据（用于取消数据回退）
            rollBackFormData: {},
            //评分显示控制，默认隐藏
            showScore: false,
            //保存按钮控制，默认灰显
            saveDisabled: true,
            //取消按钮控制
            cancelDisabled: true,
            //指标分类标识：指标大类
            categoryLarge: 'LARGE',
            //不可编辑
            formDisabled: true,
            //基本信息校验规则
            rules: {
                templateId: [
                    {
                        required: true, //是否必填
                        message: '模版名称不能为空', //规则
                        trigger: 'blur'  //何事件触发
                    },
                ],
            },
            //评级等级默认划分
            gradeScope: [
                {
                    rating_grade: 'AAA',
                    max_score: 100,
                    min_score: 90
                },
                {
                    rating_grade: 'AA',
                    max_score: 89,
                    min_score: 85
                },
                {
                    rating_grade: 'A',
                    max_score: 84,
                    min_score: 80
                },
                {
                    rating_grade: 'BBB',
                    max_score: 79,
                    min_score: 70
                },
                {
                    rating_grade: 'BB',
                    max_score: 69,
                    min_score: 65
                },
                {
                    rating_grade: 'B',
                    max_score: 64,
                    min_score: 60
                },
                {
                    rating_grade: 'C',
                    max_score: 60
                }
            ]
        }
    },
    mounted(){
        this.formData=JSON.parse(JSON.stringify(this.propsData))
        this.rollBackFormData=JSON.parse(JSON.stringify(this.propsData))
        this.formDisabled=this.isFormDisabled
        this.saveDisabled=this.isFormDisabled
        this.cancelDisabled=this.isFormDisabled
    },
    methods: {
        //返回
        goBack(){
            this.$emit("returnList")
        },
        //取消
        onCancel() {
            this.$emit("returnList")
        },
        //保存
        onSave() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    let url = "/joys-rest/lss-customer/template/save"
                    this.$http.put(url, this.formData).then(
                        resp => {
                            this.formData = resp.body
                            this.formDisabled=true
                            this.saveDisabled=true
                            this.cancelDisabled=true
                            this.$message.success("保存成功！")
                            this.rollBackFormData=JSON.parse(JSON.stringify(resp.body))
                        },
                        resp => {
                            this.$message.error(resp.body.message)
                        }
                    )
                }
            })
        },
        //模版change事件
        categoryLargeChange(params){
            this.formData.templateId = params.itemId
            //显示评级等级
            this.formData.gradeScope = JSON.parse(JSON.stringify(this.gradeScope))
            if(this.formData.templateId){
                this.showScore = true
            }
        },
        //动态构造label
        getLabel(val){
            return '等级(' + val + ')'
        },
        //分值校验只能输入正整数
        proving(obj, flag){
            if(flag=='max_score'){
                this.$set(obj, 'max_score', obj.max_score.replace(/[^\.\d]/g,'').replace('.',''))
                obj.max_score = obj.max_score.replace(/[^\.\d]/g,'').replace('.','')
                this.formData.gradeScope[0].max_score = obj.max_score.replace(/[^\.\d]/g,'').replace('.','')
            }else{
                obj.min_score = obj.min_score.replace(/[^\.\d]/g,'').replace('.','')
            }
        },
    }
}
</script>

<style scoped>
.tip {
    font-family: 'PingFangSC-Medium';
    font-size: 14px;
    color: #747778;
    letter-spacing: 0;
    line-height: 36px;
}
.divClass {
    background-color: #F4F8F9;
    padding: 48px 76px 16px 76px;
}
.colSecondClass >>> .el-form-item__label {
    width: 30px!important;
}
@media only screen and (min-width: 768px) {
    /* .el-col-sm-0 */
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .el-col-md-12 .inputClass-min {
        width: 250px;
    }
    .el-col-md-12 .labelClass-max >>> .el-form-item__label {
        width: 30px!important;
    }
    .el-col-md-12 .inputClass-max {
        width: 228px;
    }
}
@media only screen and (min-width: 1200px) {
    .el-col-lg-6 .inputClass-min {
        width: 250px;
    }
    .el-col-lg-6 .labelClass-max >>> .el-form-item__label {
        width: 30px!important;
    }
    .el-col-lg-6 .inputClass-max {
        width: 228px;
    }
}
@media only screen and (min-width: 1920px) {
    /* .el-col-xl-0 */
}

/* .el-col-lg-6 .inputClass-min >>> .el-input__inner {
    width: 185px;
}
.el-col-lg-6 .labelClass-max >>> .el-form-item__label {
    width: 30px!important;
}
.el-col-lg-6 .inputClass-max >>> .el-input__inner {
    width: 230px;
} */
/* .el-col-md-8 .inputClass-min >>> .el-input__inner {
    width: 180px;
}
.el-col-md-8 .labelClass-max >>> .el-form-item__label {
    width: 80px!important;
}
.el-col-md-8 .inputClass-max >>> .el-input__inner {
    width: 220px;
} */

.el-input {
    white-space: nowrap;
}
.cardClass >>> span {
    white-space: nowrap;
}
</style>